<template>
	
  <div style=" margin-top:30px">
		<div class="head"> 
		
		搜索：<el-autocomplete v-model="search"  placeholder="请输入内容" ></el-autocomplete> <el-button icon="el-icon-search" circle></el-button>

		</div>
	
<center>

<div class="deit">
    <div class="crumbs">
      <el-breadcrumb separator="/">
            <el-breadcrumb-item><i class="el-icon-date"></i> 订单管理</el-breadcrumb-item>
            <el-breadcrumb-item>订单列表</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="cantainer">
	<el-table :data="OrderList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
		<el-table-column label="全选">
			<el-checkbox ></el-checkbox>
		</el-table-column>
      <el-table-column prop="proId" label="商品ID" width="180">
      </el-table-column>
      <el-table-column prop="userId" label="用户ID" width="180">
      </el-table-column>
      <el-table-column prop="orderDate" label="订单创建时间">
      </el-table-column>
			<el-table-column prop="paymentType" label="支付方式">
      </el-table-column>
			<el-table-column prop="status" label="状态">
      </el-table-column>
			<el-table-column label="操作" align="center">
				  <template slot-scope="scops">
						<el-button type="primary" size="mini"  icon="el-icon-edit"  @click="getupdateOrder(scops.row.id)">编辑</el-button>
						<el-button type="primary" size="mini"  icon="el-icon-delete" @click="DeleteOrder(scops.row.id)">删除</el-button>
					
					</template>
      </el-table-column>
    </el-table>
 						<!-- 分页 -->
			  <el-pagination style="margin-top:20px ;"
               @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
               :current-page="currentPage"
              :page-sizes="[5, 8]" 
               :page-size="pagesize"        
              layout="total, sizes, prev, pager, next, jumper"
             :total="OrderList.length">    
         </el-pagination>
        </div>
    </div>
  </div>


	    <!-- <table border="1" cellspacing="0" width="1200px">
	      <thead>
	        <tr>
  								<th>商品ID</th>
  								<th>用户ID</th>
  								<th>订单创建时间</th>
  								<th>支付方式</th>
         					<th>状态</th>
         					<th>操作</th>
	          </tr>
	        </thead>
	        <tbody>
	            <tr v-for="item in OrderList" :key="item.id">
	              <td >{{item.proId}}</td>
								<td >{{item.userId}}</td>
								<td >{{item.orderDate}}</td>
								<td >{{item.paymentType}}</td>
								<td >{{item.status}}</td>
								<td ><i class="el-icon-delete" @click="DeleteOrder(item.id)"></i></td>
	            
              </tr>
	   			
	        </tbody>
	    </table> -->
			</center>
	</div>
</template>

<script>
export default {
  name:"manageOrders",
  data(){
		return{
			search:'',
			OrderList:[{
			  id:'',
        ordId:'',
        proId:'',
        userId:'',
        orderDate:'',
        paymentType:'',
        status:'',

				admin:''
			}],
			 currentPage:1, //初始页
       pagesize:8,    //    每页的数据
        

		}

	},mounted(){
   
		this.getOders()
	},created() {
        this.handleUserList()
    }
	,methods:{
		//获取订单的数据用于显示
		getOders:function(){
			this.$axios.get("/order/getorder").then(
				res=>{
						this.OrderList=res.data;
						console.log(this.OrderList);
				}
			)
		},
		//删除订单的记录
		DeleteOrder:function(DeleteId){
			var admin=localStorage.getItem("admin");
			
			this.$axios.get("/order/deleteOrder",{params:{id:DeleteId,admin:admin}}).then(res=>{
				this.getOders();
				if(res.data!=0){
					alert("删除成功");
				}else{
					alert("删除失败,该订单有销售记录无法删除")
				}

			})
		},
		//转跳到订单的修改页面，只传ID，用于修改页面的数据回显
		getupdateOrder:function(UpdateId){
				this.$router.push({
					name:'orderUpdate',
					params:{UpdateId}
				})
		},
		//分页功能
			handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
        },
        handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
        },
        handleUserList() {
            this.$axios.get('http://localhost:8080/BMS/order/getorder').then(res => {  //这是从本地请求的数据接口，
                this.OrderList = res.body
            })
        }

	}
}
</script>

<style scoped>
 .head{
	position: relative;
	top:-40px;
	text-align: left;
} 
el-button{

}

</style>